
<template>
  <el-container class="app-wrapper">
    <el-aside width="auto" class="sidebar-container">
      <el-menu
        active-text-color="#ffd04b"
        background-color="@menuBg"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
        router
      >
        <el-menu-item index="/home">
          <el-icon><icon-menu /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-menu-item index="/history">
          <el-icon><chat-line-square /></el-icon>
          <span>咨询记录</span>
        </el-menu-item>
        <el-menu-item index="/info">
          <el-icon><files /></el-icon>
          <span>个人资料</span>
        </el-menu-item>
        <el-menu-item index="/bind">
          <el-icon><paperclip /></el-icon>
          <span>绑定督导</span>
        </el-menu-item>
        <el-menu-item index="" @click="drawer = true">
          <el-icon><icon-tools /></el-icon>
          <span>账户管理</span>
        </el-menu-item>
        <el-menu-item index="" @click="drawer2 = true">
          <el-icon><phone-filled /></el-icon>
          <span>启动会话</span>
        </el-menu-item>
        <!-- <el-menu-item index="" @click="drawer3 = true;getList()">
          <el-icon><icon-tools /></el-icon>
          <span>请求督导</span>
        </el-menu-item> -->
      </el-menu>
    </el-aside>
    <div class="operation">
      <el-drawer
        ref="drawerRef"
        v-model="drawer"
        size="15%"
        title="账户操作"
        direction="ltr"
        withHeader="false"
      >
        <div class="demo-drawer__content">
          <el-form :model="form">
            <el-form-item>
              <el-button
                type="primary"
                :icon="Orange"
                @click="LogOut"
                style="position: relative; left: 32%"
              >
                登出</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                style="position: relative; left: 26%"
                :icon="Mouse"
                @click="
                  showDialog = true;
                  close();
                "
              >
                修改密码</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-drawer>
      <el-drawer
        v-model="drawer3"
        title="请求督导"
        size="30%"
        :before-close="(showForm = false)"
      >
        <div v-loading="!showForm">
          <el-form v-if="showForm">
            <el-form-item v-for="item in supervisorList" :key="item">
              {{ item.name }}
              <el-button type="primary">求助</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-drawer>
      <el-dialog v-model="showDialog">
        <el-form class="password-change" label-position="left">
          <el-form-item label="旧密码">
            <el-input
              v-model="passForm.oldPassword"
              type="password"
              placeholder="请输入旧密码"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input
              v-model="passForm.newPassword"
              type="password"
              placeholder="请输入新密码"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="确认新密码">
            <el-input
              v-model="confirm"
              type="password"
              placeholder="请重新输入新密码"
              show-password
            ></el-input>
          </el-form-item>
          <el-form>
            <el-button type="primary" @click="onSubmit()">确认</el-button>
            <el-button @click="showDialog = false">取消</el-button>
          </el-form>
        </el-form>
      </el-dialog>
    </div>

    <div class="operation">
      <el-drawer
        v-model="drawer2"
        :direction="rtl"
        :with-header="false"
        :show-close="false"
        :margin="-1"
        :padding="0"
        size="92%"
      >
        <iframe
          src="http://124.221.217.151"
          border="0"
          name="OrderFrom"
          id="chatFrom"
          width="100%"
          height="100%"
          marginwidth="0"
          marginheight="0"
          frameborder="0"
          scrolling="yes"
        >
        </iframe>
      </el-drawer>
    </div>

    <div class="container">
      <div>
        <el-page-header
          class="head"
          content="心理学院热线咨询"
          title=" "
          :icon="ArrowLeft"
          @back="goBack"
        />
      </div>
      <router-view />
    </div>
  </el-container>
</template>



<script lang="ts" setup>
import { password, user } from "@/interface/type";
import router from "@/router";
import { accountLogOut, editPass, getInfo, searchBind } from "@/service/api";
import { getSupervisorList } from "@/service/api_admin";
import { User } from "@element-plus/icons";
import { Menu as IconMenu, Tools as IconTools,ChatLineSquare, Calendar, Avatar, Files, Paperclip, PhoneFilled } from "@element-plus/icons-vue";
import {
  Delete,
  Tools,
  Edit,
  Search,
  Share,
  Upload,
  Back,
  ArrowLeft,
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { fa } from "element-plus/lib/locale";
import { Md5 } from "ts-md5";
import {
  h,
  ref,
  defineComponent,
  reactive,
  unref,
  getCurrentScope,
  getCurrentInstance,
} from "vue";
const drawer = ref(false);
const drawer2 = ref(false);
const drawer3 = ref(false);
const showForm = ref(false);
const isCollapse = ref(false);
let currentUser = ref(new user());
const supervisorList = ref<any>([]);
const passForm = ref<password>({
  oldPassword: "",
  newPassword: "",
});
const confirm = ref("");
const showDialog = ref(false);
const goBack = () => {
  if (isCollapse.value == true) {
    isCollapse.value = false;
  } else {
    isCollapse.value = true;
  }
};
const LogOut = () => {
  accountLogOut().then();
  router.push("/login");
};
const onSubmit = () => {
  const option = { oldPassword: "", newPassword: "" };
  if (!passForm.value.newPassword) {
    ElMessage({
      type: "warning",
      message: "请输入新密码!",
    });
    passForm.value.newPassword = "";
    confirm.value = "";
  } else if (!passForm.value.oldPassword) {
    ElMessage({
      type: "warning",
      message: "请输入旧密码!",
    });
    passForm.value.newPassword = "";
    confirm.value = "";
  } else if (passForm.value?.newPassword !== confirm.value) {
    ElMessage({
      type: "warning",
      message: "两次输入密码不一致!",
    });
    passForm.value.newPassword = "";
    confirm.value = "";
  } else {
    option.oldPassword = Md5.hashStr(passForm.value.oldPassword);
    option.newPassword = Md5.hashStr(passForm.value.newPassword);
    if (passForm.value.oldPassword == passForm.value.newPassword) {
      ElMessage({
        type: "warning",
        message: "新密码与原密码相同!",
      });
      passForm.value.newPassword = "";
      confirm.value = "";
    } else {
      editPass(option).then((res) => {
        if (res.data.message == "OK") {
          ElMessage({
            type: "success",
            message: "修改成功",
          });
          showDialog.value = false;
        } else if(res.data.message == "旧密码不正确"){
          ElMessage({
            type: "error",
            message: "旧密码错误",
          });
          passForm.value = { oldPassword: "", newPassword: "" };
          confirm.value = "";
        }
      });
    }
  }
};
const close = () => {
  drawer.value = false;
  drawer2.value = false;
};
const getList = async () => {
  await getInfo().then(async (res) => {
    currentUser.value = new user(res.data.result);
    console.log("currentUser", currentUser);
    supervisorList.value.length = 0;
    await searchBind({ counsellorID: currentUser.value.counsellorID }).then(
      (res) => {
        let data: any[] = res.data.result;
        data = Array.from(data);
        data.forEach((item: any) => {
          supervisorList.value.push({
            name: item.name,
            supervisorID: item.supervisorID,
          });
        });
        console.log("supervisorList", supervisorList);
        showForm.value = true;
      }
    );
  });
};
</script>

<style lang="less" scoped>
@import "src/styles/variables.less";
.app-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.sidebar-container {
  position: fixed;
  height: 100%;
  overflow: hidden;
  background-color: @menuBg;
  .el-menu {
    border-right-width: 0;
  }
  .bottom {
    position: absolute;
    width: 46px;
    height: 32px;
    top: 800px;
    left: 20px;
  }
}
.container {
  width: calc(100% - @sideBarWidth);
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  transition: all 0.28s;
  .el-page-header {
    display: flex;
    line-height: 47px;
    font-size: 26px;
  }
  .el-page-header__content {
    font-size: 26px;
  }
}

section.el-drawer__body {
  border: 0px;
  margin: 0px;
  padding: 0px;
}
</style>
